<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=no"/>
<title>狮子会首页</title>
<!-- <link href="css/maint.css" type="text/css" rel="stylesheet" /> -->
<css href="/Public/css/maint.css" />
<css href="/Public/css/fontpic.css" />
<!-- <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> -->
<js  href="/Public/js/jquery-1.7.1.min.js" />
<!--<script type="text/javascript" src="js/jquery.masonry.min.js"></script> -->
<js  href="/Public/js/jquery.masonry.min.js" />
<!--<script type="text/javascript" src="js/main.js"></script> -->
<js  href="/Public/js/common.js" />
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript">
$(function() {
	/*瀑布流开始*/
	var container = $('#ulWaterfall');
	var loading = $('#imloading');
	// 初始化loading状态
	loading.data("on", true);				
	/*模拟从后台获取到的数据*/
	//var sqlJson	=	common.show.fetchJson();
	var load = function(sqlJson) {
		if (sqlJson.size <= 0) {
			loading.text('只有这么多了！');
		} else {
			var html = "";
			for (var i in sqlJson.datas) {
			console.log( sqlJson.datas );
				html +="<li class='item'><a href='"+"/show/detail/"+sqlJson.datas[i].id+"' target='_blank'><img src='" + sqlJson.datas[i].pic + "'></a>"
				html +="<div class='workName'>"+sqlJson.datas[i].show_name+"</div>";
				html +="<div class='authorName'><span class='spanName'>"+sqlJson.datas[i].author_name+"</span>";
				html +="<span class='spanHeart'><span class='fa fa-fw fa-heart'></span>"+sqlJson.datas[i].votes+"</span></div>";
				html +="<div class='divNum'><span class='spanLike'>"+"排名："+sqlJson.datas[i].rank+"</span>";
				html +="<span class='spanNum'>"+"编号："+sqlJson.datas[i].id+"</span></div>";
				html +="<div class='workSchool'>"+"学校："+sqlJson.datas[i].school_name+"</div>";
				html +="<div class='divPraise'><a href='"+"/show/detail/"+sqlJson.datas[i].id+"'><div class='like'>给TA点赞</div></a></div></li>";
			}
			/*模拟ajax请求数据时延时800毫秒*/
			var time = setTimeout(function() {
				var newElems = $(html).css({
					opacity: 0
				}).appendTo(container);
				newElems.imagesLoaded(function() {
					newElems.animate({
						opacity: 1
					}, 10);	
					container.masonry('appended', newElems, true);
					loading.data("on", true).fadeOut();
					clearTimeout(time);
				});
			}, 10)
		}
	};

	common.show.fetchJson( {}, load );

	$(window).scroll(function() { 
		if (!loading.data("on")) return;
		var itemNum = $('#waterfull').find('.item').length;
		var itemArr = [];
		itemArr[0] = $('#waterfull').find('.item').eq(itemNum - 1).offset().top + $('#waterfull').find('.item').eq(itemNum - 1)[0].offsetHeight;
		itemArr[1] = $('#waterfull').find('.item').eq(itemNum - 2).offset().top + $('#waterfull').find('.item').eq(itemNum - 1)[0].offsetHeight;
		itemArr[2] = $('#waterfull').find('.item').eq(itemNum - 3).offset().top + $('#waterfull').find('.item').eq(itemNum - 1)[0].offsetHeight;
		var maxTop = Math.max.apply(null, itemArr);
		if (maxTop < $(window).height() + $(document).scrollTop()) {
			//加载更多数据
			loading.data("on", false).fadeIn();
			common.show.fetchJson( {}, load );
		}
	});
});

</script>
</head>	
<body style="background-color:#f2f2f2;" class="bot50">
<include file="Tpl/header" />

<div id="main">
	<div class="activeTitles">
	<ul class="ulactTitle"> <!--TODO: not good, cause html rendering uneffective, should use real tab-->
            <li class="on"><a href="/show/weixin" target="_self"><span>作品人气榜</span></a></li>
            <li><a href="/teacher/index" target="_self"><span class="bor0">人气指导老师</span></a></li>
        </ul>
    </div>
     <!-------------作品人气榜------------------------->
    <!-------------search------------------------->
     <div class="searchBox">
        <div class="search">
            <span class="fa fa-fw fa-search"></span>
            <input class="txt"  placeholder="输入参赛编号或者作者姓名进行搜索"/>
        </div>
    </div>
    <!-------------search  END------------------------->
	<!-------------waterfall---------------------------->
		<div class="content">
			<div class="waterFallBox" id="waterfull">
				<ul id="ulWaterfall">
				</ul>
			</div>
			<div id="imloading" class="loading">加载中</div>
		</div>
	<!-------------waterfall END------------------------->
    <!-------------作品人气榜------------------------->
</div>
<!-------------main END------------------------->
<include file="Tpl/footer" />
<script type="text/javascript">
	wx.config({
    	debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    	appId: "{$wxuser['appid']}", // 必填，公众号的唯一标识
    	timestamp: {$timestamp}, // 必填，生成签名的时间戳
    	nonceStr: '{$nonceStr}', // 必填，生成签名的随机串
    	signature: '{$wxSha1}',// 必填，签名，见附录1
    	jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
	});
	wx.ready( function(){
		wx.onMenuShareAppMessage({
	    	title: '投票活动', // 分享标题
	    	desc: '详细的投票活动', // 分享描述
	    	link: '{$siteUrl}', // 分享链接
	    	imgUrl: '', // 分享图标
	    	type: 'link', // 分享类型,music、video或link，不填默认为link
	    	dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
	    	success: function () { 
	    	    // 用户确认分享后执行的回调函数
	    	},
	    	cancel: function () { 
	    	    // 用户取消分享后执行的回调函数
	    	}
		});
	});
	wx.error( function( res ){
		$("#imloading").text( res );
	});
</script>
</body>
</html>
